<template>
    <div class="select-item">
        <span>信息统计</span>
        <el-select v-model="functionalModule" placeholder="请选择" style="width:260px;margin-left: 12px;">
            <el-option v-for="item in functionalModules" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
        </el-select>
    </div>
    <div class="bottom-box">
        <div class="box message-box">
            <span class="top-title">统计信息</span>
            <div class="message-item">
                <span class="title">电网运行趋势演化分析</span>
                <div class="right-item">
                    <span>
                        热电联产机组1产电: {{ agentScene.electronicOne }}
                    </span>
                    <span>
                        热电联产机组2产电: {{ agentScene.electronicTwo }}
                    </span>
                    <span>
                        储能电池1: {{ agentScene.battaryOne }}
                    </span>
                    <span>
                        储能电池2: {{ agentScene.battaryTwo }}
                    </span>
                </div>
            </div>
            <div class="message-item" style="background-color:rgba(35,68,88,0.5);">
                <span class="title">电网未来态势分析</span>
                <div class="right-item">
                    <span>
                        电网负荷需求: {{ agentScene.loadRequire }}
                    </span>
                    <span>
                        光伏出力预测: {{ agentScene.forecasting }}
                    </span>
                    <span>
                        风电出力预测: {{ agentScene.windElec }}
                    </span>
                </div>
            </div>
            <div class="message-item">
                <span class="title">电网量测异常抵御评估系数</span>
                <div class="right-item">
                    <el-input style="width:80px;" :readonly="true" v-model="agentScene.coefficient" />
                </div>
            </div>
            <div class="message-item" style="background-color:rgba(35,68,88,0.5);">
                <span class="title">智能体与实际场景匹配度</span>
                <div class="right-item">
                    <el-input style="width:80px;" :readonly="true" v-model="agentScene.sceneMatchDegree" />
                </div>
            </div>
        </div>
        <div :style="{ width: $computeVw(20) }"></div>
        <div class="box list-box">
            <div>
                <sapn :class="['span-button', buttonIndex === 0 ? 'span-button-active' : '']" @click="jumpTable">列表
                </sapn>
                <sapn :class="['span-button', buttonIndex === 1 ? 'span-button-active' : '']" @click="jumpDialog">流程图
                </sapn>
            </div>
            <div :style="{ height: $computeVh(650), overflow: 'hidden' }">
                <router-view />
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import axios from "axios";
import { useRouter } from 'vue-router'
import { computed, defineComponent, onMounted, ref, watch } from "vue";
import { BASE_URL } from '@/utils/common.js'

const agentScene = ref({
    sceneMatchDegree: 0.938,
    coefficient: 0.936,
    electronicOne: '0.592602MW',
    electronicTwo: '0.256458MW',
    battaryOne: '0.599972MW',
    battaryTwo: '-0.199654MW',
    loadRequire: '10.555751MW',
    forecasting: '0MW',
    windElec: '1.237465MW',

})

const router = useRouter();
const buttonIndex = ref(0)

function jumpTable() {
    buttonIndex.value = 0
    router.push({
        name: 'informationTable',
        params: {
            paramName: functionalModule.value
        }
    });
    // router.push('/effect/optimaze-ctrl/optimaze-child3/information-table')
}

function jumpDialog() {
    buttonIndex.value = 1
    router.push({
        name: 'informationDialog',
        params: {
            paramName: functionalModule.value
        }
    });
    //  router.push("/effect/optimaze-ctrl/optimaze-child3/information-dialog")
}

onMounted(
    () => { jumpTable() }
)

const functionalModule = ref('历史统计信息')

const functionalModules = ref([
    { value: "历史统计信息", label: "历史统计信息" },
    { value: "当前统计信息", label: "当前统计信息" },
])

watch(functionalModule, (newVal, oldVal) => {
    //alert("param1是::"+newVal);
    if (newVal === 'historyInfo') {
        agentScene.value = {
            sceneMatchDegree: 0.938,
            coefficient: 0.936,
            electronicOne: '0.592602MW',
            electronicTwo: '0.256458MW',
            battaryOne: '0.599972MW',
            battaryTwo: '-0.199654MW',
            loadRequire: '10.555751MW',
            forecasting: '0MW',
            windElec: '1.237465MW',
        }
        // let obj =  functionalModules.value.find(item=> item.value===newVal)
        let obj = newVal
        console.log(obj)
        router.push({
            name: 'informationTable',
            params: {
                paramName: obj
            }
        });

        functionalModule.value = obj
    } else {
        agentScene.value = {
            sceneMatchDegree: 0.938,
            coefficient: 0.936,
            electronicOne: '0.592606MW',
            electronicTwo: '0.256408MW',
            battaryOne: '-0.598473MW',
            battaryTwo: '-0.199959MW',
            loadRequire: '10.576759MW',
            forecasting: '0MW',
            windElec: '1.234626MW',
        }
        // let obj=  functionalModules.value.find(item=> item.value===newVal)
        let obj = newVal
        console.log(obj)
        router.push({
            name: 'informationTable',
            params: {
                paramName: obj
            }
        });

        functionalModule.value = obj
    }

}
)

</script>

<style scoped lang="scss">
.select-item {
    display: flex;
    align-items: center;
    margin-bottom: computeVh(20);
}

.bottom-box {
    display: flex;
    flex: 1;
    overflow: hidden;

    .box {
        flex: 1;
        flex-shrink: 0;
        padding: computeVh(10) computeVw(30);
        background-color: #192E37;
        border: 1px solid #3F8893;
    }

    .message-box {
        display: flex;
        flex-direction: column;

        .top-title {
            font-size: computeVw(16);
            font-weight: bold;
            color: #00D7BE;
            margin-top: computeVh(10);
        }

        .message-item {
            height: computeVh(120);
            display: flex;
            align-items: center;
            background-color: #234458;
            margin-top: computeVh(16);

            .title {
                color: #00D7BE;
                margin-left: computeVw(58);
                flex: 4;
            }

            .right-item {
                flex: 6;
                display: flex;
                flex-direction: column;

                span {
                    line-height: computeVh(25);
                }
            }
        }
    }

    .list-box {
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: hidden;

        .span-button {
            display: inline-block;
            border: none;
            border-radius: 0;
            background-color: none;
            color: #fefefe;
            font-weight: bold;
            font-size: 16px;
            margin: computeVh(10) computeVw(48) computeVw(20) 0;
            cursor: pointer;

        }

        .span-button-active {
            color: #42FFE7;
        }
    }
}
</style>